<%@page isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<script type="text/javascript">
	$().ready(function() {
		$("#assignButton").click(function() {
			$("#assignLecturer").submit();
		});
	});
</script>

<div style="padding:10px">
		<span class="title">Define Course Participants : ${course.title}</span>			
			<table class="details">
				<tr>
					<td><label>Choose Lecturer</label> 
					<form id="assignLecturer" action="/admin/courses/assignLecturer.do">
						<input type="hidden" name="redirectURL" value="/admin/courses/courseParticipants.do?courseID=${course.id}" />
						<input type="hidden" name="courseID" value="${course.id}"/>
						<select name="lecturerID">
							<option>None Assigned</option>
							<c:forEach items="${availableLecturers}" var="lecturer">
								<c:choose>
									<c:when test="${course.lecturerID == lecturer.id}">
										<option selected="selected" value="${lecturer.id}">${lecturer.displayName}</option>
									</c:when>
									<c:otherwise>
										<option value="${lecturer.id}">${lecturer.displayName}</option>
									</c:otherwise>
								</c:choose>
							</c:forEach>							
						</select><a href="#" title="Assign this lecturer" id="assignButton"><img src="/img/assign.png" width="16" height="16" border="0"/></a>
					</form>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<table>
							<tr>
								<td style="border:none"><label>Available Students</label></td>
								<td style="border:none"><label>Assigned Students</label></td>
							</tr>
							<tr>
								<td style="border:none">
									<div style="width:190px;height:110px;overflow:auto; border: 1px solid #CCCCCC">
										<div style="width:170px;height:${fn:length(availableStudents) * 20}px;">
										<c:forEach items="${availableStudents}" var="student">
											<div>${student.displayName} <a href="/admin/courses/assignStudentToCourse.do?studentID=${student.id}&courseID=${course.id}&redirectURL=/admin/courses/courseParticipants.do?courseID=${course.id}"><img src="/img/approve.png" width="16" height="16" border="0"/></a></div>
										</c:forEach>
										</div>
									</div>													
								</td>
								<td style="border:none">
									<div style="width:190px;height:110px;overflow:auto; border: 1px solid #CCCCCC">
										<div style="width:170px;height:${fn:length(assignedStudents) * 20}px;">
										<c:forEach items="${assignedStudents}" var="student">
											<div>${student.displayName} <a href="/admin/courses/removeStudentFromCourse.do?studentID=${student.id}&courseID=${course.id}&redirectURL=/admin/courses/courseParticipants.do?courseID=${course.id}"><img src="/img/decline.png" width="16" height="16" border="0"/></a></div>
										</c:forEach>
										</div>
									</div>													
								</td>
							</tr>
						</table>
					</td>
				</tr>				
				<tr>
					<td colspan="2"><a class="underlineLink" href="/admin/courses/available.do">Back to courses</a></td>
				</tr>
			</table>
</div>